<template>
	<view class="EditShippingAddress bigestBox">
		<view class="edit boxSize_bb">
			<up-form v-model="addData">
				<up-form-item
					label="收货地址"
					prop="addData.address"
					ref="item1"
					class="item"
				>
					<view class="" style="display: flex;">
						<up-input v-model="addData.address" :value="addData.address" border="none" />
						<text class="hilton hilton-dingwei" @tap="isLocation"></text>
					</view>
				</up-form-item>
				<up-form-item
					label="门牌号"
					prop="addData.houseNumber"
					ref="item1"
					class="item"
				>
					<up-input v-model="addData.houseNumber" :value="addData.houseNumber" border="none" />
				</up-form-item>
				<up-form-item
					label="联系人"
					prop="addData.contactPerson"
					ref="item1"
					class="item"
				>
					<up-input v-model="addData.contactPerson" border="none" />
				</up-form-item>
				<up-form-item
					label="手机号"
					prop="addData.phone"
					ref="item1"
					class="item"
				>
					<up-input v-model="addData.phone" border="none" />
				</up-form-item>
			</up-form>
		</view>
		<view class="save" @tap="saveAddr">
			保存
		</view>
	</view>
</template>

<script>
import { getAddress } from '../../api/address';
import { getLocation, navigateBack, showModal, chooseLocation } from '@/utils/promise';
import { navigateTo } from '../../utils/promise';
	export default {
		data() {
			return {
				addData: {
					address: "",
					houseNumber: '',
					contactPerson: '',
					phone: '',
				},
				locId: 0,
			};
		},
		onLoad(options) {
			// console.log(options)
			if(options.id === "" || options.id === undefined) {
				return
			}
			this.locId = options.id
		},
		onShow() {
		},
		methods: {
			saveAddr() {
				navigateBack()
			},
			getAddressMsg() {
				let params = {
					id: this.locId,
				}
				getAddress(params).then((res) => {
					console.log(res)
				}).catch((err) => {
					console.log(err)
				})
			},
			isLocation() {
				showModal({
					title: "提示",
					content: "是否需要定位",
					showCancel: true,
					cancelText: "否",
					confirmText: "是",
				}).then((res) => {
					if(res.cancel) {
						return
					}
					this.getLocation()
				})
			},
			getLocation() {
				// uni.chooseAddress({
				// 	success(res) {
				// 		console.log(res)
				// 	},
				// 	fail(err) {
				// 		console.log(err)
				// 	}
				// })
				// let that = this
				getLocation().then((res) => {
					// navigateTo({
					// 	url: `/pages/OpenMap/OpenMap?longitude=${res.longitude}&latitude=${res.latitude}`
					// })
					this.getLocMsg(res.longitude, res.latitude)
				}).catch((err) => {
					console.log(err)
				})
				// uni.getLocation()
			},
			getLocMsg(longitude, latitude) {
				chooseLocation({
					longitude: longitude,
					latitude: latitude
				}).then((res) => {
					// console.log(res)
					this.$nextTick(() => {
						this.addData.address = res.address
						this.addData.houseNumber = res.name
					})
					// console.log(this.addData)
				}).catch((err) => {
					console.log(err)
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	@import "../../static/commonStyleLess/grayBox.less";

	.EditShippingAddress {
		padding: 30rpx;
		font-family: 'PingFang SC';
		font-weight: 400;
		font-size: 28rpx;
		letter-spacing: 0px;
		color: #222222;

		::v-deep .u-form-item__body__left {
			flex: 1;
			/* 让左侧占据更多空间 */
			min-width: 80rpx;
			/* 设置最小宽度 */
		}

		::v-deep .u-input__content__field-wrapper__field {
			text-align: right !important;
		}

		.edit {
			width: 690rpx;
			padding: 30rpx;
			// height: 186rpx;
			border-top-left-radius: 16rpx;
			border-top-right-radius: 16rpx;
			background: #FFFFFF;
			margin: 0 auto;

			.item {}
		}

		.save {
			width: 670rpx;
			height: 88rpx;
			border-radius: 8rpx;
			background: #0F4C97;
			font-size: 34rpx;
			line-height: 88rpx;
			color: #FFFFFF;
			text-align: center;
			margin: 60rpx auto 0 auto;

		}
	}
</style>